<!doctype html>
<html>
<head>
    <meta charset="gb2312">
    <title>图标和按钮组件</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
</head>
<body>
<!--自带图标-->
<button class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star"></span>
</button>
<!--下拉列表菜单-->
<div class="dropdown">
    <button class="btn btn-default" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">资讯</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</div>

<!--按钮组-->
<div class="btn-group">
    <button type="button" class="btn btn-default">左</button>
    <button type="button" class="btn btn-default">中</button>
    <button type="button" class="btn btn-default">右</button>
</div>
<!--将多个按钮组组合起来便于管理-->
<div class="btn-toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default">左</button>
        <button type="button" class="btn btn-default">中</button>
        <button type="button" class="btn btn-default">右</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>
        <button type="button" class="btn btn-default">3</button>
    </div>
</div>
<!--按钮下拉菜单-->
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">资讯</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</div>
<!--按钮下拉菜单-->
<div class="btn-group">
    <button type="button" class="btn btn-default">下拉菜单</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">资讯</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</div>

<script type="javascript" src="js/bootstrap.min.js"></script>
<script type="javascript" src="js/jquery.min.js"></script>
</body>
</html>
